<template>
  <view class="container">
    <view class="carousel">
      <swiper indicator-dots circular=true duration="400">
        <swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
          <view class="image-wrapper">
            <image :src=item class="loaded" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="introduce-section">
      <text class="title">{{medicine.name}}</text><br>
      <text class="title2">{{medicine.sku}}</text>
      <view class="price-box">
        <text class="price-tip">¥</text>
        <text class="price">{{medicine.actualSalesUnitPrice}}</text>
        <text class="m-price">¥{{medicine.price}}</text>
        <!-- <text class="coupon-tip">7折</text> -->
      </view>
      <view class="bot-row">
        <text>销量: {{medicine.salesVolume}}</text>
        <text>库存: {{medicine.inventory}}</text>
        <text>浏览量: 768</text>
      </view>
    </view>




<!--    &lt;!&ndash;  分享 &ndash;&gt;-->
<!--    <view class="share-section" @click="share">-->
<!--      <view class="share-icon">-->
<!--        <text class="yticon icon-xingxing"></text>-->
<!--        返-->
<!--      </view>-->
<!--      <text class="tit">该商品分享可领49减10红包</text>-->
<!--      <text class="yticon icon-bangzhu1"></text>-->
<!--      <view class="share-btn">-->
<!--        立即分享-->
<!--        <text class="yticon icon-you"></text>-->
<!--      </view>-->

<!--    </view>-->


    <view class="table-container">
      <text class="tit">药品说明</text>
      <view class="table-row" v-if="medicine.name" >
        <view class="table-cell fixed-column">
          药品名称
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.name }}
        </view>
      </view>
      <view class="table-row" v-if="medicine.manufacturingEnterprise">
        <view class="table-cell fixed-column">
          生产企业
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.manufacturingEnterprise }}
        </view>
      </view>
      <view class="table-row" v-if="medicine.sku">
        <view class="table-cell fixed-column">
          药品规格
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.sku }}
        </view>
      </view>
      <view class="table-row" v-if="medicine.drugIngredients">
        <view class="table-cell fixed-column">
          药品成分
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.drugIngredients }}
        </view>
      </view>
      <view class="table-row" v-if="medicine.contraindications">
        <view class="table-cell fixed-column">
          用药禁忌
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.contraindications }}
        </view>
      </view>
      <view class="table-row" v-if="medicine.indicativeFunctions">
        <view class="table-cell fixed-column">
          主治功能
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.indicativeFunctions }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.usagAndDosage">
        <view class="table-cell fixed-column">
          用法用量
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.usagAndDosage }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.drugShape">
        <view class="table-cell fixed-column">
          药品性状
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.drugShape }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.adverseReactions">
        <view class="table-cell fixed-column">
          不良反应
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.adverseReactions }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.interact">
        <view class="table-cell fixed-column">
          相互作用
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.interact }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.storageConditions">
        <view class="table-cell fixed-column">
          贮藏条件
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.storageConditions }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.packages">
        <view class="table-cell fixed-column">
          包装
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.packages }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.dosageForm">
        <view class="table-cell fixed-column">
          剂型
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.dosageForm }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.precautions">
        <view class="table-cell fixed-column">
          注意事项
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.precautions }}
        </view>
      </view>
      <view class="table-row" v-if="isExpanded && medicine.approvalNo">
        <view class="table-cell fixed-column">
          批准文号
        </view>
        <view class="table-cell dynamic-column">
          {{ medicine.approvalNo }}
        </view>
      </view>
      <text class="tit" @click="toggleMedicineInfo">点击{{ isExpanded ? '收起' : '展开' }}</text>
    </view>


    <!-- 评价 -->
    <view class="eva-section">
      <view class="e-header" @click="contentList()">
        <text class="tit">评价</text>
        <text v-if="comment && comment.count !== undefined">{{comment.count}}</text>
        <text v-else>暂无评论快去发表有爱评论吧！</text>
        <text class="tip" v-if="comment && (comment.positiveRate === 100 || comment.positiveRate)">好评率 {{comment.positiveRate || '未知'}}%</text>
        <text v-else class="tip"></text>
      </view>
      <view class="brand-info" v-if="comment">
        <view class="d-header">
        </view>
        <text class="attr" v-if="comment.userName">用户:{{comment.userName}}</text>
        <view class="brand-box" v-if="comment.pic || comment.productName || comment.content || comment.createTime">
          <view class="image-wrapper" v-if="comment.pic">
            <image :src="comment.pic" class="loaded" mode="aspectFit"></image>
          </view>
          <view v-else>
            <text>暂无图片、产品名、内容或时间信息</text>
          </view>
          <view v-if="comment.pic || comment.productName || comment.content || comment.createTime">
            <text v-if="comment.productName">{{comment.productName}}</text>
            <br><br>
            <text v-if="comment.content">内容:{{comment.content}}</text>
            <br><br>
            <view class="bot" v-if="comment.createTime">
              <text class="time">评论时间: {{comment.createTime}}</text>
            </view>
            <view v-else>
              <text>暂无评论详情</text>
            </view>
          </view>
        </view>
        <view v-else>
          <text>暂无评论信息</text>
        </view>
      </view>
      <view v-else>
        <text>暂无评论数据</text>
      </view>
    </view>
    <!--图文展示-->
    <view class="detail-desc">
      <view class="d-header">
        <text class="text">消费提示</text><br>
        <text class="text otc-text">【OTC】请按药品说明书或者在药师指导下购买和使用</text>
      </view>
      </view>
      <rich-text :nodes="desc"></rich-text>
      <view class="style">
        <view class="item" v-for="(item,index) in imgList">
          <image class="image" :src=item mode="aspectFit"></image>
        </view>
      </view>

    <!-- 底部操作菜单 -->
    <view class="page-bottom">
      <navigator url="/pages/shop/index" open-type="switchTab" class="p-b-btn">
        <text class="yticon icon-xiatubiao--copy"></text>
        <text>首页</text>
      </navigator>
      <view class="action-btn-group">
        <button type="primary" class=" action-btn no-border buy-now-btn" @click="dialogFormVisible=true">立即购买</button>
      </view>
    </view>

    <!-- 分享 -->
    <share ref="share" :contentHeight="580" :shareList="shareList"></share>

    <!--温馨提示-->
    <view class="container">
      <view class="tipBot">
        <text class="tip-title">温馨提示</text>
        <view class="tip-list">
          <text class="tip-item">1、药品请认真阅读药品说明书的注意事项、禁忌等内容，并在医师指导下使用，将药品置于儿童无法触及位置。</text><br>
          <text class="tip-item">2、处方通过互联网医院开具或自行上传已有处方后，经执证药师审核，才能发货。</text><br>
          <text class="tip-item">3、医疗器械：请仔细阅读产品说明书或者在医务人员的指导下购买和使用，禁忌内容或者注意事项详见说明书。</text><br>
          <text class="tip-item">4、保健食品：本品不能代替药物。</text><br>
          <text class="tip-item">5、化妆品：化妆品不能代替药品，不能治疗皮肤病等疾病。</text><br>
          <text class="tip-item">6、药品属于特殊商品，按照国家食品药品监督管理局2016版GSP第一百七十三条规定，除药品质量原因外，药品一经售出，不得退换。</text><br>
          <text class="tip-item">7、图片为实物拍摄，由于厂家不定期更换产品包装，如遇新包装上市图片更新可能滞后，具体产品请您以收到的实物为准。</text><br>
        </view>
      </view>

      <view class="price-info">
        <text class="price-title">价格说明</text>
        <view class="price-detail">
          <text class="price-item">1、未划线价：未划线价是当前商品或服务在本平台上的实时销售价（不含包装费、运输费等），是您最终决定是否购买商品或服务的依据。具体成交价格根据商品或服务参加的活动等情况发生变化，最终以订单结算页面呈现的价格为准。</text><br>
          <text class="price-item">2、划线价：划线价为参考价，并非原价或线下实体店的销售价。该划线价可能是商品或服务的网络零售指导价、商家提供的正品零售价或该商品/服务在本平台上曾经展示过的销售价等。由于地区、时间的差异性和市场行情波动，零售指导价、销售价等可能会与您购物时展示的价格不一致，划线价仅供您参考。</text><br>
        </view>
      </view>
    </view>


    <!-- 选择药品数量 -->
    <el-dialog title="选择购买数量" :visible.sync="dialogFormVisible">
      <div class="drug-purchase">
        <div class="drug-info">
          <img :src="medicine.pic.split(',')[0]" class="drug-image" alt="Drug Image">
          <div class="drug-price-stock">
            <text class="price"></text>
            <span class="drug-price">¥{{medicine.actualSalesUnitPrice}}</span>
            <span class="drug-stock">剩余 {{medicine.inventory}}件</span>
            <span class="drug-selected">已选 {{ medicine.sku }}</span>
          </div>
        </div>
        <div class="drug-spec-quantity">
          <span class="drug-spec">规格</span>
          <span class="drug-spec-value">{{ medicine.sku }}</span>
          <div class="quantity-selector">
            <span class="drug-spec">购买数量</span>
            <span class="quantity-decrease" @click="decreaseQuantity">-</span>
            <span class="quantity-value">{{ quantity }}</span>
            <span class="quantity-increase" @click="increaseQuantity">+</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <button type="primary" class=" action-btn no-border buy-now-btn" @click="toBuy">立即购买</button>
      </div>
    </el-dialog>

  </view>
</template>

<script>
import {formatDate} from '@/utils/date';
import {getMedicine} from "@/api/medicine/medicine";
const defaultServiceList = [{
  id: 1,
  name: "无忧退货"
}, {
  id: 2,
  name: "快速退款"
}, {
  id: 3,
  name: "免费包邮"
}];
const defaultShareList = [{
  type: 1,
  icon: '/static/temp/share_wechat.png',
  text: '微信好友'
},
  {
    type: 2,
    icon: '/static/temp/share_moment.png',
    text: '朋友圈'
  },
  {
    type: 3,
    icon: '/static/temp/share_qq.png',
    text: 'QQ好友'
  },
  {
    type: 4,
    icon: '/static/temp/share_qqzone.png',
    text: 'QQ空间'
  }
]
export default {
  components: {
    // share
  },
  data() {
    return {
      specClass: 'none',
      attrClass: 'none',
      specSelected: [],
      favorite: false,
      shareList: [],
      imgList: [],
      desc: '',
      specList: [],
      specChildList: [],
      product: {},
      comment:{},
      brand: {},
      serviceList: [],
      promotionTipList: [],
      couponState: 0,
      couponList: [],
      couponId:null,
      medicine: {},
      isExpanded: false,
      maskState: 0, //优惠券面板显示状态
      dialogFormVisible: false,
      formLabelWidth: '120px',
      quantity: 1,
      // drugImage: require('/static/medicine/order/all.png') // 假设药品图片路
    };
  },
  async onLoad(options) {
    this.id = options.id
    this.loadData();
  },
  computed: {
    // ...mapState(['hasLogin'])
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatCouponUseType(useType) {
      if (useType == 0) {
        return "全场通用";
      } else if (useType == 1) {
        return "指定分类商品可用";
      } else if (useType == 2) {
        return "指定商品可用";
      }
      return null;
    },
  },
  methods: {
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    increaseQuantity() {
      this.quantity++;
    },
    confirmPurchase() {
      // 这里可以添加确认购买的逻辑，例如提交订单等操作
      console.log('确认购买，数量：', this.quantity);
    },
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 300;
      let state = type === 'show' ? 1 : 0;
      this.maskState = 2;
      setTimeout(() => {
        this.maskState = state;
      }, timer)
    },
    async loadData() {
      getMedicine(this.id).then(res => {
        this.medicine = res.data
        this.imgList = this.medicine.pic.split(',')
      })
    },
    toggleMedicineInfo() {
      this.isExpanded = !this.isExpanded;
    },
    toBuy(){
      this.dialogFormVisible = false
      uni.navigateTo({
        url: `/pages/shop/orders/createOrder?medicineId=${this.medicine.id}&num=${this.quantity}`+`&orderType=1`,
      })
    },
    // //优惠券弹窗开关
    // toggleCoupon(type) {
    //   fetchProductCouponList(this.product.id).then(response => {
    //     this.couponList = response.data;
    //     if(this.couponList==null||this.couponList.length==0){
    //       uni.showToast({
    //         title:"暂无可领优惠券",
    //         icon:"none"
    //       })
    //       return;
    //     }
    //     let timer = type === 'show' ? 10 : 300;
    //     let state = type === 'show' ? 1 : 0;
    //     this.couponState = 2;
    //     setTimeout(() => {
    //       this.couponState = state;
    //     }, timer)
    //   });
    },

    //领取优惠券
    // addCoupon(coupon) {
    // 	this.toggleCoupon();
    // 	addMemberCoupon(coupon.couponId).then(response => {
    // 		uni.showToast({
    // 			title: '领取优惠券成功！',
    // 			duration: 2000
    // 		});
    // 	});
    // },


    // addCoupon(coupon) {
    //   this.toggleCoupon(); // 假设这个函数是用来切换优惠券状态的
    //   addMemberCoupon(coupon.couponId).then(response => {
    //     if (response.code==200) {
    //       uni.showToast({
    //         title: '领取优惠券成功！',
    //         duration: 2000
    //       });
    //     } else {
    //       uni.showToast({
    //         title: '领取优惠券时发生错误，请稍后再试。!',
    //         duration: 2000
    //       });
    //     }
    //   }).catch(error => {
    //     uni.showToast({
    //       title: '用户领取上限!',
    //       duration: 2000
    //     });
    //   });
    // },
    // //分享
    // share() {
    //   this.$refs.share.toggleMask();
    // },
    // //收藏
    // toFavorite() {
    //   if (!this.checkForLogin()) {
    //     return;
    //   }
    //   if (this.favorite) {
    //     //取消收藏
    //     deleteProductCollection({
    //       productId: this.product.id
    //     }).then(response => {
    //       uni.showToast({
    //         title: "取消收藏成功！",
    //         icon: 'none'
    //       });
    //       this.favorite = !this.favorite;
    //     });
    //   } else {
    //     //收藏
    //     let productCollection = {
    //       productId: this.product.id,
    //       productName: this.product.name,
    //       productPic: this.product.pic,
    //       productPrice: this.product.price,
    //       productSubTitle: this.product.subTitle
    //     }
    //     createProductCollection(productCollection).then(response => {
    //       uni.showToast({
    //         title: "收藏成功！",
    //         icon: 'none'
    //       });
    //       this.favorite = !this.favorite;
    //     });
    //   }
    // },
    // buy() {
    //   uni.showToast({
    //     title: "暂时只支持从购物车下单！",
    //     icon: 'none'
    //   });
    // },
    // stopPrevent() {},
    // //设置头图信息
    // initImgList() {
    //   let tempPics = this.product.pic.split(',');
    //   tempPics.unshift(this.product.pic);
    //   for (let item of tempPics) {
    //     if (item != null && item != '') {
    //       this.imgList.push({
    //         src: item
    //       });
    //     }
    //   }
    // },
    // //设置服务信息
    // initServiceList() {
    //   for (let item of defaultServiceList) {
    //     if (this.product.serviceIds.indexOf(item.id) != -1) {
    //       this.serviceList.push(item.name);
    //     }
    //   }
    // },

    // //设置促销活动信息
    // initPromotionTipList(data) {
    //   let promotionType = this.product.promotionType;
    //   if (promotionType == 0) {
    //     this.promotionTipList.push("暂无优惠");
    //   } else if (promotionType == 1) {
    //     this.promotionTipList.push("单品优惠");
    //   } else if (promotionType == 2) {
    //     this.promotionTipList.push("会员优惠");
    //   } else if (promotionType == 3) {
    //     this.promotionTipList.push("多买优惠");
    //     for (let item of data.productLadderList) {
    //       this.promotionTipList.push("满" + item.count + "件打" + item.discount * 10 + "折");
    //     }
    //   } else if (promotionType == 4) {
    //     this.promotionTipList.push("满减优惠");
    //     for (let item of data.productFullReductionList) {
    //       this.promotionTipList.push("满" + item.fullPrice + "元减" + item.reducePrice + "元");
    //     }
    //   } else if (promotionType == 5) {
    //     this.promotionTipList.push("限时优惠");
    //   }
    // },
    // //初始化商品详情信息
    // initProductDesc() {
    //   let rawhtml = this.product.detailMobileHtml;
    //   let tempNode = document.createElement('div');
    //   tempNode.innerHTML = rawhtml;
    //   let imgs = tempNode.getElementsByTagName('img');
    //   for (let i = 0; i < imgs.length; i++) {
    //     imgs[i].style.width = '100%';
    //     imgs[i].style.height = 'auto';
    //     imgs[i].style.display = 'block';
    //   }
    //   this.desc = tempNode.innerHTML;
    // },
    // //处理创建浏览记录
    // handleReadHistory() {
    //   if (this.hasLogin) {
    //     let data = {
    //       productId: this.product.id,
    //       productName: this.product.name,
    //       productPic: this.product.pic,
    //       productPrice: this.product.price,
    //       productSubTitle: this.product.subTitle,
    //     }
    //     createReadHistory(data);
    //   }
    // },
    //当商品规格改变时，修改商品信息
    // changeSpecInfo() {
    //   let skuStock = this.getSkuStock();
    //   if (skuStock != null) {
    //     this.product.originalPrice = skuStock.price;
    //     if (this.product.promotionType == 1) {
    //       //单品优惠使用促销价
    //       this.product.price = skuStock.promotionPrice;
    //     } else {
    //       this.product.price = skuStock.price;
    //     }
    //     this.product.stock = skuStock.stock;
    //   }
    // },

    // contentList(){
    //   let id = this.productId
    //   console.log(id)
    //   uni.navigateTo({
    //     url: `/pages/start/start?id=${id}`
    //   })
    // },
}
</script>

<style lang='scss'>
page {
  background: #fff;
  padding-bottom: 160upx;
}


 .drug-purchase {
           padding: 20px;
         }
.drug-info {
          display: flex;
          align-items: center;
        }
.drug-image {
          width: 100px;
          height: 100px;
          margin-right: 20px;
        }
.drug-price-stock {
                  display: flex;
                  flex-direction: column;
                }
.drug-price {
          color: red;
          font-size: 20px;
        }
.drug-stock {
          font-size: 16px;
        }








.container {
  padding: 20px;
}

.tipBot {
  margin-bottom: 20px;
}

.tip-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tip-list {
  margin-left: 20px;
}

.tip-item {
  margin-bottom: 10px;
  line-height: 1.5;
}

.price-info {
  margin-bottom: 20px;
}

.price-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.price-detail {
  margin-left: 20px;
}

.price-item {
  margin-bottom: 10px;
  line-height: 1.5;
}


.style {
  display: flex;
  flex-direction: column; /* 确保子元素垂直堆叠 */
  justify-content: center; /* 如果希望整个容器内容在垂直方向上居中（可选） */
  /* 高度可以根据需要设置，比如100vh或者具体像素值 */
  /* 但注意，如果设置了具体高度且图片高度超过此值，将会出现滚动条 */
  height: auto; /* 自动高度，根据内容调整 */
  padding: 0 15px; /* 可选：水平内边距，用于在屏幕边缘和图片之间留出空间 */
}

.text-container {
  margin-bottom: 20px; /* 文本与链接之间的间距 */
}
.text {
  display: block; /* 使文本占据一整行 */
  margin-bottom: 10px; /* 文本行之间的间距 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}
.otc-text {
  font-weight: bold; /* 对OTC文本进行加粗处理 */
}

.item {
  display: flex; /* 使用Flexbox来水平居中图片 */
  justify-content: center; /* 水平居中 */
  margin-bottom: 15px; /* 子元素之间的间距 */
  width: 100%; /* 确保.item占据父容器的全宽（可选，但有助于水平居中） */
  box-sizing: border-box; /* 包括内边距和边框在内计算宽度（可选） */
}

.image {
  width: 600px; /* 图片宽度，根据需求调整 */
  height: 600px; /* 图片高度，根据需求调整 */
  max-width: 100%; /* 可选：确保图片不会超出其父容器的宽度 */
}

.table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px; /* 假设表格的最大宽度为600px，可以根据需要调整 */
  margin: 0 auto; /* 居中显示 */
  padding: 10px; /* 可选：添加内边距以增加可读性 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影以增加立体感 */
  background-color: #fff; /* 可选：设置背景色为白色 */
}

.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
  padding: 10px 0;
  border-bottom: 1px solid #ddd; /* 添加行分隔线 */
}

.table-row:last-child {
  border-bottom: none; /* 最后一行不需要分隔线 */
}

.table-cell {
  padding: 0 10px; /* 添加内边距以增加可读性 */
}

.fixed-column {
  width: 120px; /* 固定宽度，稍微宽一些以容纳更多文本 */
  background-color: #f5f5f5; /* 浅灰色背景以区分 */
  text-align: left; /* 左对齐文本，更符合阅读习惯 */
  font-weight: bold; /* 可选：加粗字体以突出显示 */
}

.dynamic-column {
  flex-grow: 1; /* 第二列可以增长以填充剩余空间 */
  word-wrap: break-word; /* 处理长文本换行 */
}

/* 添加第一行的第一个单元格的左边框（如果需要的话，因为通常表格会有边框包围整个表格） */
.table-row:first-child .fixed-column {
  border-left: 1px solid #ddd; /* 可选：为第一行的第一个单元格添加左边框 */
}


.icon-you {
  font-size: $font-base + 2upx;
  color: #888;
}

.carousel {
  height: 722upx;
  position: relative;

  swiper {
    height: 100%;
  }

  .image-wrapper {
    width: 100%;
    height: 100%;
  }

  .swiper-item {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 750upx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

}

/* 标题简介 */
.introduce-section {
  background: #fff;
  padding: 20upx 30upx;

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    height: 50upx;
    line-height: 50upx;
  }

  .title2 {
    font-size: 28upx;
    color: $font-color-light;
    height: 46upx;
    line-height: 46upx;
  }

  .price-box {
    display: flex;
    align-items: baseline;
    height: 64upx;
    padding: 10upx 0;
    font-size: 26upx;
    color: $uni-color-primary;
  }

  .price {
    font-size: $font-lg + 2upx;
  }

  .m-price {
    margin: 0 12upx;
    color: $font-color-light;
    text-decoration: line-through;
  }

  .coupon-tip {
    align-items: center;
    padding: 4upx 10upx;
    background: $uni-color-primary;
    font-size: $font-sm;
    color: #fff;
    border-radius: 6upx;
    line-height: 1;
    transform: translateY(-4upx);
  }

  .bot-row {
    display: flex;
    align-items: center;
    height: 50upx;
    font-size: $font-sm;
    color: $font-color-light;

    text {
      flex: 1;
    }
  }
}

/* 分享 */
.share-section {
  display: flex;
  align-items: center;
  color: $font-color-base;
  background: linear-gradient(left, #fdf5f6, #fbebf6);
  padding: 12upx 30upx;

  .share-icon {
    display: flex;
    align-items: center;
    width: 70upx;
    height: 30upx;
    line-height: 1;
    border: 1px solid $uni-color-primary;
    border-radius: 4upx;
    position: relative;
    overflow: hidden;
    font-size: 22upx;
    color: $uni-color-primary;

    &:after {
      content: '';
      width: 50upx;
      height: 50upx;
      border-radius: 50%;
      left: -20upx;
      top: -12upx;
      position: absolute;
      background: $uni-color-primary;
    }
  }

  .icon-xingxing {
    position: relative;
    z-index: 1;
    font-size: 24upx;
    margin-left: 2upx;
    margin-right: 10upx;
    color: #fff;
    line-height: 1;
  }

  .tit {
    font-size: $font-base;
    margin-left: 10upx;
  }

  .icon-bangzhu1 {
    padding: 10upx;
    font-size: 30upx;
    line-height: 1;
  }

  .share-btn {
    flex: 1;
    text-align: right;
    font-size: $font-sm;
    color: $uni-color-primary;
  }

  .icon-you {
    font-size: $font-sm;
    margin-left: 4upx;
    color: $uni-color-primary;
  }
}

.c-list {
  font-size: $font-sm + 2upx;
  color: $font-color-base;
  background: #fff;

  .c-row {
    display: flex;
    align-items: center;
    padding: 20upx 30upx;
    position: relative;
  }

  .tit {
    width: 140upx;
  }

  .con {
    flex: 1;
    color: $font-color-dark;

    .selected-text {
      margin-right: 10upx;
    }
  }

  .bz-list {
    height: 40upx;
    font-size: $font-sm+2upx;
    color: $font-color-dark;

    text {
      display: inline-block;
      margin-right: 30upx;
    }
  }

  .con-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: $font-color-dark;
    line-height: 40upx;
  }

  .red {
    color: $uni-color-primary;
  }
}

/* 评价 */
.eva-section {
  display: flex;
  flex-direction: column;
  padding: 20upx 30upx;
  background: #fff;
  margin-top: 16upx;

  .e-header {
    display: flex;
    align-items: center;
    height: 70upx;
    font-size: $font-sm + 2upx;
    color: $font-color-light;

    .tit {
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      margin-right: 4upx;
    }

    .tip {
      flex: 1;
      text-align: right;
    }

    .icon-you {
      margin-left: 10upx;
    }
  }
}

.eva-box {
  display: flex;
  padding: 20upx 0;

  .portrait {
    flex-shrink: 0;
    width: 80upx;
    height: 80upx;
    border-radius: 100px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-base;
    color: $font-color-base;
    padding-left: 26upx;

    .con {
      font-size: $font-base;
      color: $font-color-dark;
      padding: 20upx 0;
    }

    .bot {
      display: flex;
      justify-content: space-between;
      font-size: $font-sm;
      color: $font-color-light;
    }
  }
}

/*  详情 */
.detail-desc {
  background: #fff;
  margin-top: 16upx;

  .d-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    font-size: $font-base + 2upx;
    color: $font-color-dark;
    position: relative;

    text {
      padding: 0 20upx;
      background: #fff;
      position: relative;
      z-index: 1;
    }

    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
    }
  }
}

.detail-desc>>>img {
  width: 100%;
  height: auto;
}

/* 规格选择弹窗 */
.attr-content {
  padding: 10upx 30upx;

  .a-t {
    display: flex;

    image {
      width: 170upx;
      height: 170upx;
      flex-shrink: 0;
      margin-top: -40upx;
      border-radius: 8upx;
    ;
    }

    .right {
      display: flex;
      flex-direction: column;
      padding-left: 24upx;
      font-size: $font-sm + 2upx;
      color: $font-color-base;
      line-height: 42upx;

      .price {
        font-size: $font-lg;
        color: $uni-color-primary;
        margin-bottom: 10upx;
      }

      .selected-text {
        margin-right: 10upx;
      }
    }
  }

  .attr-list {
    display: flex;
    flex-direction: column;
    font-size: $font-base + 2upx;
    color: $font-color-base;
    padding-top: 30upx;
    padding-left: 10upx;
  }

  .item-list {
    padding: 20upx 0 0;
    display: flex;
    flex-wrap: wrap;

    text {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
      margin-right: 20upx;
      margin-bottom: 20upx;
      border-radius: 100upx;
      min-width: 60upx;
      height: 60upx;
      padding: 0 20upx;
      font-size: $font-base;
      color: $font-color-dark;
    }

    .selected {
      background: #fbebee;
      color: $uni-color-primary;
    }
  }
}

.no-padding {
  padding: 0upx 0upx;
}

/*  弹出层 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.2s linear both;
    }

    .layer {
      animation: showLayer 0.2s linear both;
    }
  }

  &.hide {
    .mask {
      animation: hidePopup 0.2s linear both;
    }

    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }

  &.none {
    display: none;
  }

  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .layer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    min-height: 40vh;
    border-radius: 10upx 10upx 0 0;
    background-color: #fff;

    .btn {
      height: 66upx;
      line-height: 66upx;
      border-radius: 100upx;
      background: $uni-color-primary;
      font-size: $font-base + 2upx;
      color: #fff;
      margin: 30upx auto 20upx;
    }
  }

  @keyframes showPopup {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes hidePopup {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }

    100% {
      transform: translateY(0%);
    }
  }

  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(120%);
    }
  }
}

/* 底部操作菜单 */
.page-bottom {
  position: fixed;
  left: 30upx;
  bottom: 30upx;
  z-index: 95;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 690upx;
  height: 100upx;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  border-radius: 16upx;

  .p-b-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: $font-sm;
    color: $font-color-base;
    width: 96upx;
    height: 80upx;

    .yticon {
      font-size: 40upx;
      line-height: 48upx;
      color: $font-color-light;
    }

    &.active,
    &.active .yticon {
      color: $uni-color-primary;
    }

    .icon-fenxiang2 {
      font-size: 42upx;
      transform: translateY(-2upx);
    }

    .icon-shoucang {
      font-size: 46upx;
    }
  }

  .action-btn-group {
    display: flex;
    height: 76upx;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0 20upx 40upx -16upx #fa436a;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
    background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
    margin-left: 20upx;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translateY(-50%);
      height: 28upx;
      width: 0;
      border-right: 1px solid rgba(255, 255, 255, .5);
    }

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180upx;
      height: 100%;
      font-size: $font-base;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
  }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: .3s;

  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: .3s;
    overflow-y: scroll;
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, .4);

    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;

  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }

  .time {
    font-size: 24upx;
    color: $font-color-light;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }

  .price {
    font-size: 44upx;
    color: $base-color;

    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }

  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }

  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;

    &.r {
      left: auto;
      right: -6upx;
    }
  }
}

.brand-info {
  margin-top: 16upx;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .brand-box {
    display: flex;
    align-items: center;
    padding: 30upx 50upx;

    .image-wrapper {
      width: 210upx;
      height: 70upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: $font-lg+4upx;
      margin-left: 30upx;
      color: $font-color-dark;

      text:last-child {
        font-size: $font-sm;
        color: $font-color-light;
        margin-top: 8upx;

        &.Skeleton {
          width: 220upx;
        }
      }
    }
  }

  .d-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    font-size: $font-base + 2upx;
    color: $font-color-dark;
    position: relative;

    text {
      padding: 0 20upx;
      background: #fff;
      position: relative;
      z-index: 1;
    }

    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
